<style>
    .test-code,.test-code .code_editor_view,.test-code .code_editor{
        min-height:400px;
    }
    .code-text{
        vertical-align: top;
        line-height: 28px;
        font-size: 20px;
    }
    .back{
        position: relative;
        top: -5px;
        left: -10px;
    }
    .switch-w{
        float: left;
        margin-top: 3px;
        margin-left: 15px;
    }
    .result{
        border: 1px solid #aaa;    
        word-wrap: break-word;
        /* overflow-x: hidden; */
    }
</style>
<div class='title'>在线使用Jet</div>
<div class='text clearfix'>    
    <button class='j-btn f-left' jshow='back' jon='this.$route.back()' icon='chevron-left'>返回</button>
    <button class='j-btn f-left' jon='resetCode' icon='refresh'>重置代码</button>
    <div class='switch-w'>
        <span class='code-text'>编辑</span>
        <div class="j-switch" jui-bind='codeBool' jui-change='changeMode'>
            <div></div>
            <div></div>
        </div>
        <span class='code-text'>运行</span>
    </div>
</div>
<div jshow='{{!$.codeBool}}'>
    <div class='text'>
        <div class='j-code test-code' dark jdom='code' jui-code-line='true' id='codeOnLine' jui-bind='code' width='99%' jui-onload='loadCode' height='auto' buttons min-height='500px'>

        </div>
    </div>
</div>
<div jshow='codeBool'>
    <div class="text">
        <div jdom='result' class='text result tm'>
        </div>
        <div>console:(按住ctrl+enter运行代码)</div>
        <button class="j-btn m" jon='runConsole'><i class="j-icon icon-share-sign"></i>运行</button>
        <div class='j-code' jdom='console' jui-bind='consoleCode' width='99%' height='auto'>
        </div>
        <div j='res'></div>
    </div>
</div>
<script>
    
new Jet({
    name:'test',
    onrouted:function(){
    },
    onmounted:function(){
        //this.code=aa.html();
        this.initKeyDown(this.$dom.console);
        //<div jif='{{$.age}}<18:text[未成年|成年人]'></div>\n\
    },
    static:{
        code:"<div j='message'></div><br>\n\
<div j='user'>\n\
    <div j=name>'姓名:'+$</div>\n\
    <div>年龄:<input j='age' type='text' class='j-input' jon='input:console.log(this.user.age)'/></div>\n\
    <div j='age'>($<18)?'未成年':'成年人'</div>\n\
</div>\n\
<script>\n\
    new Jet({\n\
        name:'online',\n\
        data:{\n\
            message:'Hello Jet',\n\
            user:{\n\
                name:'theajack',\n\
                age:24\n\
            }\n\
        },\n\
        func:{\n\
        }\n\
    })\n"+
"<"+"/script>"
    },
    data:{
        codeBool:false,
        back:false,
        consoleCode:'',
        res:'',
        code:function(){
            return this.$data.code;
        }
    },
    onmounted:function(){
        if(this.$storage('testCode')){
            this.code=this.$storage('testCode');
        }
        if(this.$storage('showBack')){
            this.back=true;
        }
    },
    func:{
        replace:function (js) {
            return js.replace('new Jet({', 'new Jet("test","test-container",{');//手动指定父元素和容器
        },
        changeMode:function() {
            if(this.codeBool){
                this.$storage('testCode',this.code);
                this.consoleCode=' ';
                this.res='';
                this.$dom.result.ele.attr('comp__id','test-container');
                this.$dom.result.html=this.$jui('code').txt();
                var txt=['//# sourceURL=__code_online.js\r\n'];
                this.$dom.result.ele.findTag('script').each(function(item){
                    txt.push(item.txt());
                    item.remove();
                })
                if($J.id('codejs').exist()){
                    $J.id('codejs').remove();
                }
                var script=$J.ct('script').attr({
                    'id':'codejs',
                    'type':'text/javascript'
                }).html(this.replace(txt.join('')));
                document.body.append(script);
                if(this.$dom.result.ele.findAttr('jvalid').exist()){
                    Jet.valid.init();
                }
                // if(this.$dom.result.ele.findAttr('jlang').exist()){
                //     Jet.lang.init();
                // }
                JUI.init();
                this.$init();
            }
        },
        resetCode:function(){
            this.code=this.$data.code;
            this.$storage('testCode',null);
            this.$storage('showBack',null);
        },
        loadCode:function(){
            if(typeof Jet.root._code!=='undefined'){
                this.code=Jet.root._code;
                this.$storage('testCode',this.code);
                this.$storage('showBack',true);
                //this.$jui('code').txt(Jet.root._code)
                Jet.root._code=undefined;
                this.back=true;
            }
        },initKeyDown:function(jdom){
            var _this=this;
            jdom.ele.child(3).on('keydown',function(e){
                if(e.ctrlKey && e.keyCode==13){
                    _this.runConsole();
                }
            },true)
        },runConsole:function(){
            var res=(new Function('return '+this.consoleCode))();
            try{
                res=this.$.toString(res);
            }catch(e){
                res='不支持的返回类型:'+res.constructor;
            }
            this.res=res;
        }
    }
});
</script>